<template>
  <t-dialog
    v-model:visible="formVisible"
    header="上传封面图"
    width="680"
    :footer="false"
    :destroy-on-close="true"
    @close="onClickCloseBtn"
  >
    <template #body>
      <!-- 表单内容 -->
      <t-form ref="form" :data="formData" :rules="rules" :label-width="100" @submit="onSubmit">
        <t-input v-model="formData.configId" hidden></t-input>
        <!--        <t-form-item label="属性值" name="configValue">-->
        <!--          <t-input v-model="formData.configValue" />-->
        <!--        </t-form-item>-->
        <!--        <t-form-item label="备注" name="configRemark">-->
        <!--          <t-textarea v-model="formData.configRemark" />-->
        <!--        </t-form-item>-->
        <t-form-item label="图片" name="configRemark">
          <t-upload
            accept="image/*"
            multiple
            :auto-upload="false"
            theme="image-flow"
            :upload-all-files-in-one-request="true"
            :request-method="
              async (files: any) => {
                console.log('files', files);
                await batchUpdateAliyun(0, 5, 'projectCover', files);
                MessagePlugin.success('上传成功');
                await emit('refreshTable');
                formVisible = false;
                return { status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }] };
              }
            "
          ></t-upload>
        </t-form-item>
        <!--        <t-form-item style="float: right">-->
        <!--          <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>-->
        <!--          <t-button theme="primary" type="submit">确定</t-button>-->
        <!--        </t-form-item>-->
      </t-form>
    </template>
  </t-dialog>
</template>

<script setup lang="tsx">
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import { PropType, ref, watch } from 'vue';

import { batchUpdateAliyun, saveOrUpdate } from '@/api/common';

export interface FormData {
  configId: number;
  configKey: string;
  configValue: string;
  configRemark: string;
}

const INITIAL_DATA: FormData = {
  configId: null,
  configKey: '',
  configValue: '',
  configRemark: '',
};

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: Object as PropType<FormData>,
});

const fileList = ref([]);

const formVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });

const onSubmit = async ({ validateResult, firstError }: SubmitContext) => {
  if (!firstError) {
    // await saveOrUpdate('/config/saveOrUpdate', formData.value);
    MessagePlugin.success('提交成功');
    formVisible.value = false;
    // await emit.refreshTable();
    await emit('refreshTable');
  } else {
    console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};

const onClickCloseBtn = () => {
  formVisible.value = false;
  formData.value = { ...INITIAL_DATA };
  console.log(`onClickCloseBtn`);
};

const emit = defineEmits(['update:visible', 'refreshTable']);
// const emit = defineEmits<{
//   'update:visible': void;
//   refreshTable: void;
// }>();

watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
  },
);

watch(
  () => props.data,
  (val) => {
    formData.value = val;
  },
);

const rules: FormRules = {
  configKey: [{ required: true, message: '请输入名称', type: 'error' }],
  configValue: [{ required: true, message: '请输入属性值', type: 'error' }],
  configRemark: [{ required: true, message: '请输入备注', type: 'error' }],
};
</script>
